<template>
  <div>
    <div id="player-con" class="prism-player"></div>
  </div>
</template>

<script setup lang="ts">
import { ResOptions } from '~~/types/types'
definePageMeta({
  middleware: 'course'
})
useHead({
  script: [
    { type: 'text/javascript', src: 'https://g.alicdn.com/de/prismplayer/2.9.23/aliplayer-min.js' }
  ],
  link: [{ rel: 'stylesheet', href: 'https://g.alicdn.com/de/prismplayer/2.9.23/skins/default/aliplayer-min.css' }]
})
const { public: { apiBase } } = useRuntimeConfig()
const route = useRoute()
const userStore = useUserStore()

const courseId = route.params.id
const { data } = await useFetch(`${apiBase}preschool/livePull/${courseId}`,{
  headers: {
    Authorization: userStore.getToken,
    LoginType: 'User'
  }
})
const pullUrl = (data.value as ResOptions<any>).result.pullUrl
onMounted(() => { init() })
const init = () => {
  /**
         * 播放器默认播放 source 提供的 rts 拉流地址，如果失败，则会自动降级至 rtsFallbackSource 提供的拉流地址（如 HLS 地址）。
         * 可能的降级场景包括：
         * 1. 浏览器不支持 RTS，直接降级
         * 2. RTS 信令请求失败（拉流地址无效、https配置无效、RTS配置无效等），直接降级
         * 3. RTS 起播超时或中途断流，按自定义策略重试失败后降级
         **/

  // 更多播放器配置请参考 https://player.alicdn.com/aliplayer/index.html
  let options = {
    id: 'player-con',
    source: pullUrl,
    rtsFallbackSource: '降级地址，如HLS',
    width: '100%',
    height: '500px',
    autoplay: true,
    isLive: true,
    playsinline: true,
    skipRtsSupportCheck: false, // 对于不在 https://help.aliyun.com/document_detail/397569.html 中的浏览器，可以传 true 跳过检查，强制使用 RTS（有风险，需要自测保证）

    /**
     * RTS 拉流超时会默认重试
     * 以下两个参数用来控制降级之前的重试策略，比如 3000 毫秒超时，重试一次，如果再拉不到流就降级，那么总共等待 6000 毫秒降级
     **/
    // RTS 多久拉不到流会重试，默认 3000 ms
    // rtsLoadDataTimeout: 2000,

    // RTS 拉不到流重试的次数，默认 5，此参数建议设为 1，即重试 1 次后降级，可以减少降级等待时间
    liveRetry: 1,
  }
  //@ts-ignore
  let player = new Aliplayer(options, function () {
    /* player ready */
  })

  // 降级时会触发此事件
  player.on('rtsFallback', function (event: any) {
    console.log('[EVENT]rtsFallback', event.paramData)
    // event.paramData.reason 降级的原因
    // event.paramData.fallbackUrl 降级到的地址
  })

  player.on('error', function (event: any) {
    console.log('[EVENT]error', event.paramData)
  })
}
</script>
